<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
    <title>进程</title>
</head>
<body>
<div layout:fragment="content" id="app">
    <div class="site-text">
        <h1 class="site-h1">资源</h1>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>进程列表</legend>
        </fieldset>
        <div class="layui-form">
            <table class="layui-table">
                <colgroup>
                    <col width="200">
                    <col width="200">
                    <col width="200">
                    <col width="200">
                    <col width="200">
                    <col width="200">
                </colgroup>
                <thead>
                <tr>
                    <th>是否活动</th>
                    <th>内核等级</th>
                    <th>进程标识</th>
                    <th>进程名称</th>
                    <th>过程名称</th>
                    <th>进程描述</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in items">
                    <td v-text="item[0]"></td>
                    <td v-text="item[1]"></td>
                    <td v-text="item[2]"></td>
                    <td v-text="item[3]" @click="if(item[1]=='3') kill(item['2'])"></td>
                    <td v-text="item[4]"></td>
                    <td v-text="item[5]"></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<th:block layout:fragment="bottom_script_block">
</th:block>
<script layout:fragment="script">
    var App = new Vue({
        el: '#app',
        data: {
            items: []
        },
        mounted: function () {
                this.getInfo("proc");
        },
        methods: {
            getInfo: function (name) {
                var vm = this;
                vm.$http.get('/api/query/' + name).then(function (response) {
                    var data = response.data;
                    if (data.code == 200)
                        vm.items = data.data;
                    else
                        vm.items = [ [ "发生错误", "错误代码：" + data.code, "", "", "", "" ] ];
                }, function (response) {
                    console.error('cannot get ' + name);
                });
            },
            kill: function (id) {
                var vm = this;
                vm.$http.get('/api/exec_kill', {"params": {"id": id}}).then(function (response) {
                    var data = response.data;
                    if (data.code == 200) {
                        var d = data.data;
                        if (d.error) {
                            layer.msg('操作失败！原因：' + d.msg, {
                                time: 5000,
                                btn: ['关闭']
                            });
                        } else if (d.data == 0) {
                            layer.msg('操作成功');
                            setTimeout(function(){
                                location.reload();
                            }, 1000);
                        } else {
                            layer.msg('操作失败！错误代码：' + d.data, {
                                time: 5000,
                                btn: ['关闭']
                            });
                        }
                    } else {
                        layer.msg('操作失败！错误代码：' + data.code, {
                            time: 5000,
                            btn: ['关闭']
                        });
                    }
                }, function (response) {
                    layer.msg('操作失败');
                    console.error('cannot kill process');
                });
            }
        }
    })
</script>
</body>
</html>